<!-- 回收 -->
<script setup>
import { onLoad } from '@dcloudio/uni-app'
import { toast } from '@/uni_modules/uview-plus'
import { reactive, computed } from 'vue'
// 全局数据
const data = reactive({
  list: [
    {
      orderNo: '334374658690785764',
      status: 1,
      shopList: [
        {
          imageUrl: 'https://cdn.uviewui.com/uview/goods/2.jpg',
          name: '黑金版',
          spec: '规格：8瓶',
          num: 1,
          price: 200,
        },
        {
          imageUrl: 'https://cdn.uviewui.com/uview/goods/2.jpg',
          name: '黑金版',
          spec: '规格：8瓶',
          num: 1,
          price: 200,
        },
        {
          imageUrl: 'https://cdn.uviewui.com/uview/goods/2.jpg',
          name: '黑金版',
          spec: '规格：8瓶',
          num: 1,
          price: 200,
        }
      ]
    },
    {
      orderNo: '334374658690785764',
      status: 1,
      shopList: [
        {
          imageUrl: 'https://cdn.uviewui.com/uview/goods/2.jpg',
          name: '黑金版',
          spec: '规格：8瓶',
          num: 2,
          price: 200,
        }
      ]
    }
  ],
  checkedArr: []
})
// 选中商量数量计算
const checkedNum = computed(() => {
  console.log('data.checkedArr', data.checkedArr, data.checkedArr.length)
  if (data.checkedArr.length == 0) return 0
  let num = 0
  data.checkedArr.forEach(item => {
    item.shopList.forEach(shop => {
      num += shop.num
    })
  })
  return num
})
// 提交数据
const submit = () => {
  console.log(checkedNum.value)
  // 校验数量
  if (checkedNum.value < 5) return toast('检测到您的订单未满足需求')
  if (checkedNum.value > 4) return toast('检测到您的订单已超出需求')
  // 提交回收
}
</script>

<template>
  <view class="recovery-page">
    <!-- head -->
    <view class="recovery-header">
      <image style="width: 420rpx; height: 272rpx;" src="/static/images/recovery_page_bg.png" mode="scaleToFill" />
      <view class="content-box">
        <view class="title">
          <text>平台需求：5箱黑金版</text>
        </view>
        <view class="tip">
          <text>请选择回收订单，系统会根据所 \n 选订单数量计算！</text>
        </view>
      </view>
    </view>
    <!-- 可回收订单列表 -->
    <view class="recovery-list-box">
      <up-checkbox-group v-model="data.checkedArr" placement="column" inactiveColor="#CCCCCC" activeColor="#FFC870"
        @change="checkedChange">
        <view class="item" v-for="item in data.list" :key="item">
          <!-- 头部 -->
          <view class="head">
            <view class="left">
              <view class="status"><text>待提货</text></view>
              <view class="order-no">订单单号: {{ item.orderNo }}</view>
            </view>
            <up-checkbox shape="circle" :name="item" label=""></up-checkbox>
          </view>
          <!-- 商品列表 -->
          <view class="shop-list">
            <view class="shop-item" v-for="(shopItem, j) in item.shopList" :key="j">
              <!-- 左侧 商品信息 -->
              <view class="left">
                <view class="img-box">
                  <image style="width: 100rpx; height: 100rpx;" :src="shopItem.imageUrl" mode="scaleToFill" />
                </view>
                <view class="info">
                  <view class="name">
                    <text>{{ shopItem.name }}</text>
                  </view>
                  <view class="spec">
                    <text>{{ shopItem.spec }}</text>
                  </view>
                </view>
              </view>
              <!-- 右侧 商品信息 -->
              <view class="right">
                <view class="price">
                  <text>￥{{ shopItem.price }}</text>
                </view>
                <view class="num">
                  <text>x{{ shopItem.num }}</text>
                </view>
              </view>
            </view>
          </view>
        </view>
      </up-checkbox-group>
    </view>
    <!-- 底部栏 -->
    <view class="bottom-bar">
      <view class="content">
        <view class="left">
          <text class="label">已选数量：</text>
          <text class="num">{{ checkedNum }}</text>
        </view>
        <view class="right">
          <u-button type="primary" size="large" @click="submit">确认回收</u-button>
        </view>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.recovery-page {
  box-sizing: border-box;
  padding: 0 32rpx;
  padding-bottom: 182rpx;
  min-height: 100vh;
  background-color: #F9F9F9;

  // 头部
  & .recovery-header {
    position: relative;
    // padding-top: 20rpx;
    min-height: 272rpx;

    // bg
    & image {
      position: absolute;
      top: 0rpx;
      right: 0;
      z-index: 1;
    }

    // 内容
    & .content-box {
      position: relative;
      z-index: 2;
      padding-top: 70rpx;

      padding-left: 8rpx;

      & .title {
        font-weight: 500;
        font-size: 40rpx;
        color: #333333;
      }

      & .tip {
        margin-top: 14rpx;
        font-weight: 400;
        font-size: 24rpx;
        color: #989898;
        line-height: 34rpx;
      }
    }
  }

  // 可回收订单列表
  & .recovery-list-box {
    & .item {
      padding: 0 32rpx;
      margin-bottom: 20rpx;
      background: #FFFFFF;
      border-radius: 10rpx 10rpx 10rpx 10rpx;

      // 头部
      & .head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 24rpx 0;
        border-bottom: 1rpx solid #F6F6F6;

        // 左边
        & .left {
          display: flex;
          align-items: center;

          // 状态
          & .status {
            width: 96rpx;
            height: 42rpx;
            line-height: 36rpx;
            text-align: center;
            background: #FFF2DF;
            border-radius: 4rpx;

            & text {
              font-weight: 400;
              font-size: 24rpx;
              color: #FF9F18;
            }
          }

          // 订单号
          & .order-no {
            margin-left: 24rpx;
            font-weight: 400;
            font-size: 24rpx;
            color: #333333;
          }
        }

        &::v-deep .u-checkbox {
          & .u-checkbox__icon-wrap {
            margin-right: 0;
          }
        }
      }

      // 商品列表
      & .shop-list {
        margin-top: 32rpx;
        padding-bottom: 6rpx;

        & .shop-item {
          display: flex;
          justify-content: space-between;
          margin-bottom: 24rpx;

          & .left {
            display: flex;

            // 商品图片
            & .img-box {
              width: 100rpx;
              height: 100rpx;
              overflow: hidden;
              border-radius: 10rpx;
            }

            // 商品信息
            & .info {
              margin-left: 16rpx;

              & .name {
                font-weight: 500;
                font-size: 28rpx;
                color: #333333;
              }

              & .spec {
                margin-top: 8rpx;
                font-weight: 400;
                font-size: 24rpx;
                color: #9B9B9B;
              }
            }
          }

          & .right {

            & .price {
              font-weight: 500;
              font-size: 28rpx;
              color: #333333;
            }

            & .num {
              margin-top: 8rpx;
              font-weight: 400;
              font-size: 24rpx;
              color: #9B9B9B;
              text-align: right;
            }
          }
        }
      }
    }
  }

  // 底部栏
  & .bottom-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100vw;
    height: 172rpx;
    background: #FFFFFF;
    border-top: 1rpx solid #E9E9EB;

    & .content {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 12rpx 40rpx;

      & .left {
        & .label {
          font-weight: 500;
          font-size: 24rpx;
          color: #333333;
        }

        & .num {
          font-weight: 500;
          font-size: 40rpx;
          color: #333333;
        }
      }

      & .right {
        &::v-deep .u-button {
          width: 472rpx;
          height: 88rpx;
          font-weight: 500;
          font-size: 32rpx;
          color: #FFFFFF;
          background: #FFA618;
          border: none;
          border-radius: 112rpx 112rpx 112rpx 112rpx;

        }
      }
    }
  }
}
</style>